<template>
	<div class="BannerSwiper">
		<swiper :options="swiperOption" ref="mySwiper" class="swiper-list">
		    <swiper-slide 
		    	v-for="(item,index) of resData.SwiperList"
		    	:key="item.id"
		    	class="swiper-item"
		    >
		    	<img :src="item.imgUrl" />
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
	 	</swiper>
	</div>
</template>

<script>
	export default{
		name:"BannerSwiper",
		props:["resData"],
		data(){
			return{
				swiperOption:{
					pagination:{
						el:".swiper-pagination"
					},
					autoplay:true,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-list /deep/ .swiper-pagination-bullets{
		bottom:37px;
		font-size: 0;
	}
	.swiper-list /deep/ .swiper-pagination-bullets span{
		width:20px;
		height: 20px;
		margin:0 13px;
		background: #fff;
		opacity:1;
	}
	.swiper-list /deep/ .swiper-pagination-bullets .swiper-pagination-bullet-active{
		background: #FF9900;
	}
	.BannerSwiper .swiper-item{
		width:318px;
		height: 0;
		padding-bottom: 72.4%;
		overflow: hidden;
	}
	.BannerSwiper .swiper-item img{
		width:100%;
	}
</style>